<template>
    <div class="markdown-renderer">
        <div v-html="compiledMarkdown" class="markdown-body"></div>
    </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted } from 'vue';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css';

const props = defineProps({
    content: {
        type: String,
        default: ''
    }
});

// 创建 markdown-it 实例（带代码高亮配置）
const md = new MarkdownIt({
    html: true,         // 允许 HTML 标签
    linkify: true,      // 自动转换链接
    typographer: true,  // 优化排版
    highlight: function (str, lang) {
        if (lang && hljs.getLanguage(lang)) {
            try {
                return '<pre class="hljs"><code>' +
                    hljs.highlight(str, { language: lang }).value +
                    '</code></pre>';
            } catch (__) {}
        }
        return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>';
    }
});

// 自动更新窗口大小
const updateRendererLayout = () => {
    const el = document.querySelector('.markdown-renderer');
    if (el) {
        el.style.maxWidth = `100%`;
        el.style.maxHeight = `${window.innerHeight * 0.8}px`;
    }
};

onMounted(() => {
    window.addEventListener('resize', updateRendererLayout);
    updateRendererLayout();
});

onUnmounted(() => {
    window.removeEventListener('resize', updateRendererLayout);
});

// 计算属性实时转换 Markdown
const compiledMarkdown = computed(() => {
    // 如果内容为空，返回提示信息
    if (!props.content || props.content.trim() === '') {
        return '<div class="empty-content">等待分析结果...</div>';
    }
    return md.render(props.content);
});
</script>

<style>
/* 基础 Markdown 样式 */
.markdown-renderer {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 10px;
}

.markdown-body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial;
    line-height: 1.6;
    color: #333;
    padding: 10px 0;

    /* 基础换行规则 */
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.markdown-body h1 {
    font-size: 1.8em;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
    margin: 1em 0 0.5em;
}

.markdown-body h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #eaecef;
    padding-bottom: 0.3em;
    margin: 1em 0 0.5em;
}

.markdown-body h3 {
    font-size: 1.3em;
    margin: 1em 0 0.5em;
}

.markdown-body p {
    margin: 0.8em 0;
}

.markdown-body li {
    margin: 0.5em 0;
}

.markdown-body pre {
    background-color: #f6f8fa;
    border-radius: 6px;
    padding: 16px;
    overflow: auto;
    margin: 1em 0;
}

.markdown-body code {
    font-family: Consolas, "Liberation Mono", Menlo, monospace;
    padding: 0.2em 0.4em;
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    font-size: 0.9em;
}

.markdown-body pre code {
    padding: 0;
    background-color: transparent;
    font-size: 0.9em;
    line-height: 1.5;
}

.markdown-body a {
    color: #0366d6;
    text-decoration: none;
}

.markdown-body a:hover {
    text-decoration: underline;
}

/* 表格样式 */
.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.markdown-body table th,
.markdown-body table td {
    border: 1px solid #dfe2e5;
    padding: 6px 13px;
    text-align: left;
}

.markdown-body table th {
    background-color: #f6f8fa;
}

.markdown-body table tr:nth-child(2n) {
    background-color: #f6f8fa;
}

/* 空内容样式 */
.empty-content {
    color: #999;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* 滚动条样式 */
.markdown-renderer::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.markdown-renderer::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.markdown-renderer::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0.05);
}
</style>